<template>
    <main class="main">
        <div class="now">
            <div class="level">
                <h3>
                    当前等级：<span>Lv.{{ data.level }}</span>
                </h3>
                <span class="first">0</span>
                <ul class="progress-bar">
                    <li v-for="i in 10" :key="i">
                        <span>{{ i }}</span>
                    </li>
                </ul>
                <div class="progress-color" :style="'width:' + progress"></div>
            </div>
            <div class="privilege">
                <h3>当前等级特权：</h3>
                <p v-for="(item, index) of data.info" :key="index">
                    {{ item }}
                </p>
            </div>
            <p class="un">了解等级特权></p>
        </div>
        <div class="next">
            <em
                >距离下一个等级：<span>Lv.{{ data.level + 1 }}</span></em
            >
            <div class="next-song">
                <span>听歌：</span>
                <p ref="get_element">
                    <span :style="'width:' + nextPlayWidth"></span>
                </p>
                <span
                    >还需听{{
                        nextLevel(data.nextPlayCount, data.nowPlayCount)
                    }}首歌</span
                >
            </div>
            <div class="next-login">
                <span>登录：</span>
                <p><span :style="'width:' + nextLoginWidth"></span></p>
                <span
                    >还需登录{{
                        nextLevel(data.nextLoginCount, data.nowLoginCount)
                    }}天</span
                >
            </div>
        </div>
    </main>
</template>

<script>
import { getCurrentInstance, ref, reactive, toRefs, onMounted } from "vue";
export default {
    name: "Level",
    setup() {
        const axios = getCurrentInstance().proxy.$http;

        // 获取等级相关数据
        const level = reactive({
            data: {},
        });
        const getLevelData = async () => {
            const { data } = await axios("/user/level");
            if (data.code === 200) {
                level.data = data.data;
                level.data.info = level.data.info.split("$");
            }
        };

        // 计算下一个等级
        let get_element = ref();
        const next_data = reactive({
            nextLevel(next, now) {
                return next - now;
            },
            nextLoginWidth: null,
            nextPlayWidth: null,
            progress: null,
        });
        const computedNextLevel = (element, nextCount, nowCount) => {
            const totalWidth = parseInt(getComputedStyle(element.value).width);
            let next = totalWidth / nextCount;
            next = next * nowCount + "px";
            return next;
        };
        onMounted(async () => {
            await getLevelData();
            // 计算下一次升级的进度条宽度
            next_data.nextLoginWidth = computedNextLevel(
                get_element,
                level.data.nextLoginCount,
                level.data.nowLoginCount
            );
            next_data.nextPlayWidth = computedNextLevel(
                get_element,
                level.data.nextPlayCount,
                level.data.nowPlayCount
            );
            next_data.progress =
                level.data.level * 10 + level.data.progress * 10 + "%";
        });

        return {
            ...toRefs(level),
            ...toRefs(next_data),
            get_element,
        };
    },
};
</script>

<style lang='less' scoped>
.now {
    .level {
        position: relative;
        span {
            color: #e03a24;
        }
        margin-bottom: 50px;
        .first {
            position: absolute;
            left: 0px;
            top: 66px;
            font-size: 18px;
        }
        .progress-bar {
            position: absolute;
            top: 25px;
            width: 100%;
            height: 10px;
            background-color: rgb(233, 233, 233);
            border-radius: 5px;
            margin: 70px 0px 0px 0px;
            padding: 0;
            z-index: -1;
            li {
                width: 10%;
                height: 100%;
                z-index: 10;
                float: left;
                border-right: 3px solid white;
                box-sizing: border-box;
                position: relative;
                &:first-child {
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                }
                &:last-child {
                    border: none;
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                    span {
                        right: 0px;
                    }
                }
                span {
                    position: absolute;
                    right: -7px;
                    top: -30px;
                    font-size: 18px;
                    color: #e03a24;
                    border-radius: 50%;
                }
            }
        }
        .progress-color {
            position: absolute;
            top: 95px;
            height: 10px;
            background-color: red;
            opacity: 0.2;
            border-radius: 5px;
            width: 0px;
            transition: width 2s;
        }
    }
    .privilege {
        padding-top: 50px;
        p {
            font-size: 13px;
            position: relative;
            margin: 15px 0px 15px 15px;
            &::before {
                position: absolute;
                top: 6px;
                left: -15px;
                content: "";
                display: block;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background-color: orange;
            }
        }
    }
    .un {
        font-size: 13px;
        color: rgb(113, 202, 180);
        width: 90px;
        margin-top: 40px;
        &:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }
    border-bottom: 1px solid #ccc;
    padding-bottom: 30px;
    margin-bottom: 20px;
}

.next {
    em {
        font-size: 14px;
        span {
            color: #e03a24;
            font-size: 15px;
            font-weight: 600;
        }
    }
    .next-song {
        margin: 45px 0px 20px 0px;
    }
    .next-song,
    .next-login {
        display: flex;
        span {
            font-size: 12px;
        }
        p {
            margin: 0px 10px 0px 0px;
            transform: translateY(7px);
            border-radius: 5px;
            width: 200px;
            height: 5px;
            background-color: #ccc;
            span {
                display: block;
                height: 100%;
                border-radius: 5px;
                background-color: orange;
            }
        }
    }
}
</style>